import React, { memo, useState, useEffect, useCallback } from 'react'
import style from './style.module.css'
import { reqArtist } from '@/api/artist'
import { Link } from 'react-router-dom'
import Scroll from '../../components/scroll/index.jsx'
import { shallowEqual, useSelector } from 'react-redux'
import { useDispatch } from 'react-redux'




const ArtistsPage = () => {

    const [artists, setArtist] = useState([])
    const [haveMore, setHaveMore] = useState(true)

    const { playlist } = useSelector(state => ({
        playlist: state.getIn(['playList'])
    }), shallowEqual)
    const history = useDispatch()
    useEffect(() => {
        getArtists()
    }, [])
    const getArtists = async () => {
        const res = await reqArtist({
            limit: 30
        })
        setArtist(() => res.artists)
        setHaveMore(res.more)
    }
    const goBack = () => {
        history.goBack()
    }
    const onLoadMore = useCallback(
        () => {
            console.log(artists.length);
            if (!haveMore) {
                return
            }
            setHaveMore(false)
            reqArtist({
                limit: 30,
                offset: artists.length
            }).then(res => {
                if (res.code === 200) {
                    const list = artists.concat(res.artists || []);
                    setArtist(() => list)
                    setHaveMore(res.more)
                }
            })
        },
        [artists]
    )
    console.log(artists.length);
    const h = playlist.length ? 60 : 0
    const height = { height: `calc(100vh - ${44 + h}px` }
    return (
        <div className={style.container}>
            <div className={style.navbar}>
                <div className={`iconfont icon-zuojiantou ${style.iconfont}`} onClick={goBack} />
                <div className={style.title}>热门歌手</div>
            </div>
            <div style={height}>
                <Scroll onPullingUp={onLoadMore}  >
                    <div>  <ul className={style.list}>
                        {artists && artists.map(item => <li key={item.id}>
                            <Link to={`/singer/${item.id}`}>
                                <div className={style['singer-item']}>
                                    <div className={style.avatar}>
                                        <img src={item.img1v1Url} alt="" />
                                    </div>
                                    <div>
                                        <div className={style.singerName}>{item.name}</div>
                                        <div>
                                            <span style={{ display: item.albumSize ? '' : 'none' }}>专辑:{item.albumSize}</span>&emsp;
                                            <span style={{ display: item.musicSize ? '' : 'none' }}>单曲:{item.musicSize}</span>
                                        </div>
                                    </div>
                                </div>
                            </Link>
                        </li>)}
                    </ul>
                        <div className={style.loading} style={{ display: haveMore ? 'none' : '' }}>加载完毕</div> </div>
                </Scroll>
            </div>
        </div>
    )
}
export default memo(ArtistsPage)